<template>
    <div>
        <p>用户账号：<el-input v-model="account" style="width: 240px" disabled /></p>
        <p>用户密码：<el-input v-model="password" style="width: 240px" type="password" show-password placeholder="请输入密码" />
        </p>
        <p><el-button type="primary" style="text-align: center;" @click="modify">修改</el-button></p>
    </div>
</template>

<script>
import { usermodify } from '@/views/api';
import { getStore,removeStore } from "@/libs/storage.js";
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'

export default {
    data() {
        return {
            account: getStore('user'),
            password: ref(''),
        }
    },
    methods: {
        modify() {
            usermodify({
                username: this.account,
                password: this.password
            }).then(res => {
                if (res.data.success) {
                    ElMessageBox({
                        message: res.data.data,
                        type: 'success'
                    }).then(() => {
                        removeStore('user');
                        removeStore('token');
                        this.$router.push('/login')
                    })
                } else {
                    ElMessageBox({
                        message: res.data.data,
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        mounted() {
        }
    }
}
</script>

<style></style>